<template>
  <template v-for="item in menu">

    <template v-if="item.display">
      <el-menu-item v-if="validatenull(item[childrenKey])  "
                    :index="getPath(item)"
                    @click="open(item)"
                    :key="item[labelKey]">
        <icon-temp :text="item[iconKey]"></icon-temp>
        <template #title>
          <span :alt="item[pathKey]">{{ getTitle(item) }}</span>
        </template>
      </el-menu-item>
      <el-sub-menu v-else-if="!validatenull(item[childrenKey]) "
                   :index="getPath(item)"
                   >
        <template #title>

          <icon-temp :text="item[iconKey]"></icon-temp>
          <span>{{ getTitle(item) }}</span>
        </template>
        <template v-for="(child,cindex) in item[childrenKey]"
                  :key="child[labelKey]">
          <el-menu-item :index="getPath(child)"
                        @click="open(child)"
                        v-if="validatenull(child[childrenKey])">
            <icon-temp :text="child[iconKey]"></icon-temp>
            <template #title>
              <span>{{ getTitle(child) }}</span>
            </template>
          </el-menu-item>
          <sidebar-item v-else
                        :menu="[child]"
                        :key="cindex"></sidebar-item>
        </template>
      </el-sub-menu>
    </template>
  </template>
</template>
<script>
import {validDataNull} from 'utils/validate'
import website from '@/config/website'
import {mapState} from "pinia";
import useUserStore from "@/stores/useUserStore";
import IconTemp from "../../../components/avue/core/components/icon/index.vue";

export default {
  name: "sidebarItem",
  components: {IconTemp},
  props: {
    menu: Array
  },
  computed: {
    ...mapState(useUserStore, ["roles"]),
    labelKey() {
      return website.menuConfig.label
    },
    pathKey() {
      return website.menuConfig.path
    },
    queryKey() {
      return website.menuConfig.query
    },
    iconKey() {
      return website.menuConfig.icon
    },
    childrenKey() {
      return website.menuConfig.children
    }
  },
  data() {
    return {}
  },
  created() {

  },
  methods: {
    validatenull: validDataNull,
    getPath(item) {
      return item[this.pathKey]
    },
    getTitle(item) {
      return this.$router.$avueRouter.generateTitle(item, website.menuConfig);
    },
    open(item) {
      let data = {}
      data.path = item[this.pathKey];
      data.query = item[this.queryKey]
      this.$router.push(data);
    }
  }
};
</script>

